<template>
	<div class="book common-layout">
		<el-container>
			<el-header>
				<label>商品列表</label>
				<router-link to="/admin/bookedit?bookid=0">添加新的商品</router-link>
			</el-header>
			<el-main>
				<el-table :data="booklist" style="width: 100%" :row-style="{height: '30px'}" :cell-style="{padding:'3px'}" >
				    <el-table-column prop="name" label="名称" width="200" /> 
				    <el-table-column prop="sn" label="编号" width="200" />
					<el-table-column prop="author" label="作者" width="200" />
					<el-table-column prop="publisher" label="出处" width="200" />
					<el-table-column label="日期" width="200">
						<template #default="score">{{filday(score.row.tpublish)}}</template>
					</el-table-column>
					<el-table-column label="图片" width="300">
						<template #default="score">
							<el-image :src="`${$Imgurl}/showImg/${score.row.picture}`"></el-image>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="score">
							<el-button type="text" @click="this.$router.push(`/admin/bookedit?bookid=${score.row.id}`)">编辑</el-button>
						</template>
					</el-table-column>
				  </el-table>
				<el-pagination :total="num" align="center" layout="prev , pager, next" v-model:currentPage="page"></el-pagination>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default{
		name:'Books',
		data(){
			return{
				booklist:[],
				page:1,num:60
			}
		},
		created() {
			this.getpage()
		},
		methods:{
			getpage(){
				this.axios.get(`/api/adm/book/findByPage/${this.page}/5`).then((res)=>{
					this.booklist=res.data.data.books
				}).catch((error)=>{
					console.log(error)
				})
			}
		},
		computed:{
			filday(){
				return(t)=>{
					let day=new Date(t)
					return `${day.getFullYear()}-${day.getMonth()+1}-${day.getDate()}`
				}
			}
		},
		watch:{
			page(){
				this.getpage()
			}
		}
	}
</script>

<style scoped>
	.book .el-image{
		width: 90px;
		height: 100px;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
